<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <title>我的好友</title>
</head>

<style>

    #head{
        position: fixed;
        width:100%;
        top:0;
        z-index:100;
    }

    #app_div1{
        width: 100%;
        min-height: 56vh;
        margin: auto;
        margin-top: 15vh;
        background: linear-gradient(#f7e6d3, #fbfcfd);
    }

    .app_div1_div1{
        width: 80%;
        min-height: 56vh;
        margin: auto;
        /*border: 1px solid red;*/
    }

    #app_div1_div1_div1{
        width: 100%;
        height: 10vh;
        line-height: 10vh;
        /*border: 1px solid red;*/
    }

    .item {
        margin-left: 10px;
    }

    .app_div1_div1_div2{
        width: 100%;
        /*border: 1px solid red;*/
        margin-bottom: 3vh;
    }

    .app_div1_div1_div2_people{
        width: 100%;
        height: 10vh;
        border-bottom: 1px solid rgb(193,193,193);
    }

    .app_div1_div1_div2_people_div1{
        /*border: 1px solid red;*/
    }

    .app_div1_div1_div2_people_div2{
        float: left;
        /*border-bottom: 1px solid red;*/
        width: 70%;
        height: 5vh;
        font-size:20px ;
        line-height: 5vh;
        margin-left: 20px;
        /*letter-spacing:5px;*/
    }

    .app_div1_div1_div2_people_div3{
        float: left;
        /*border: 1px solid red;*/
        width: 70%;
        height: 5vh;
        line-height: 5vh;
        color: rgb(144,147,153);
        margin-left: 20px;
        /*letter-spacing:2px;*/
        font-family: "楷体";
    }

    .app_div1_div1_div2_people_div4{
        float: right;
        /*border: 1px solid red;*/
        width: 10%;
        height: 5vh;
        font-size: 20px;
    }

    .app_div1_div1_div2_people_div4>i{
        float: right;
        margin-left: 20px;
    }

    .login_tity{
        display: flex;
        width: 100%;
        height: 21vh;
        /* border: solid 1px black; */
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #666666;
    }

    .links>a{
        text-decoration: none;
        margin: 10px;
        color: #666666;
    }

    .copyright{
        text-align: center;
        margin-top: 10px;
    }

    .div_body{
        background-color: white;
        /* 这个白边不能去 */
        border: 1px solid white;
        margin:auto;
        width: 85%;
        padding-bottom:20px;
        min-height:460px;
    }

    .div_body_div1{
         /*border: 1px solid red;*/
        margin: 15px auto 0px;
        width: 95%;
        main-height:60px;
    }

    .div_body_div1_div1{
        /* border: 1px solid red; */
        float:left;
        border-radius:25px;
        width: 50px;
        height:50px
        /* display:inline-block; */
    }

    .div_body_div1_div1>img{
        float:left;
        border-radius:25px;
        width: 50px;
        height:50px
    }

    .div_body_div1_div2{
        border: 1px solid rgb(229,229,229);
        display:inline-block;
        margin-left:10px;
        margin-right: 10px;
        border-radius:5px;
    }

    .div_body_div1_div2_div1{
        border-bottom: 1px solid rgb(229,229,229);
        /* float:right; */
        /* width: 20%; */
        height:30px;
        line-height:30px;
        /* font-family:"楷体"; */
        padding-left:10px;
        padding-right:10px;
    }

    .div_body_div1_div2_div1_span1{
        font-size:14px;
        font-weight:700;
        color:rgb(108,117,125);
    }

    .div_body_div1_div2_div1_span2{
        font-size:12px;
        color:rgb(108,117,125);
        float:right;
        margin-left:5px;
    }

    .div_body_div1_div2_div2{
        /* border: 1px solid rgb(232, 232, 232); */
        /* float:left; */
        max-width:350px;
        line-height:40px;
        font-size:14px;
        overflow:hidden;
        /* font-family:"楷体"; */
        padding-left:10px;
        padding-right:10px;
    }

    .floatRight{
        display: flex;
        justify-content: right;
        flex-direction: row-reverse;
    }

</style>

<body>

<div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
            <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
        </el-menu-item>
        <el-menu-item index="1"><a href="/videoWeb/fronts/index.html"><i class="el-icon-s-home"></i>主页</a></el-menu-item>

        <el-menu-item style="float: right;" v-if="code != 100">
            <a href="">注册</a>
            /
            <a href="login.html">登录</a>
        </el-menu-item>

        <el-submenu index="5" style="float: right;" v-if="code === 100">
            <template slot="title">
                <div class="demo-type" style="display:inline-block">
                    <div>
                        <el-avatar :src="imgSrc"></el-avatar>
                    </div>
                </div>
            </template>
            <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
            <el-menu-item index="5-2">
                <a href="/videoWeb/fronts/myFriends.html">
                    <i class="el-icon-user-solid"></i>
                    我的好友
                </a>
            </el-menu-item>
            <el-menu-item index="5-3">
                <a href="/videoWeb/fronts/myHead.html">
                    <i class="el-icon-user"></i>
                    个人中心
                </a>
            </el-menu-item>
            <el-menu-item index="5-4" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
        </el-submenu>

        <el-menu-item style="float: right;"><a href="/videoWeb/fronts/home.html">创作中心</a></el-menu-item>

    </el-menu>

    <div id="app_div1">
        <div class="app_div1_div1">
            <div id="app_div1_div1_div1">
                <el-input placeholder="请输入关键字" v-model="friendInput" clearable style="width:20%;margin-right: 10px"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="friendList">搜索</el-button>
                <el-button type="success" icon="el-icon-plus" @click="dialogAddgsVisible = true">添加</el-button>
                <el-badge :value="applyPagesTotalCount" class="item">
                    <el-button icon="el-icon-s-order" @click="applysListVisible = true">申请</el-button>
                </el-badge>
            </div>

            <div class="app_div1_div1_div2" v-for="item in friendsList">
                <div class="app_div1_div1_div2_people">
                    <div class="app_div1_div1_div2_people_div1" style="float:left;">
                        <el-avatar :src="item.headImg" style="width: 8vh; height: 8vh"></el-avatar>
                    </div>
                    <div class="app_div1_div1_div2_people_div2">
                        {{item.username}}
                    </div>
                    <div class="app_div1_div1_div2_people_div3">
                        我不知道我们能不能笑道最后
                    </div>
                    <div class="app_div1_div1_div2_people_div4">
                        <i class="el-icon-delete"></i>
                        <i class="el-icon-chat-dot-round" @click="messagesListVisible = true ; toId = item.id ; findMessageList()" ></i>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="block" style="margin-top: 25px; margin-left: 10%;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="pageNo"
                       :page-size="pageSize"
                       layout="prev, pager, next, jumper"
                       :total="pagesTotalCount">
        </el-pagination>
    </div>

    <div class="login_tity">
        <div class="links">
            <a href="">
                关于我们
            </a>
            |
            <a href="">
                联系我们
            </a>
            |
            <a href="">
                人才招聘
            </a>
            |
            <a href="">
                商家入驻
            </a>
            |
            <a href="">
                广告服务
            </a>
            |
            <a href="">
                手机蛇皮
            </a>
            |
            <a href="">
                友情链接
            </a>
            |
            <a href="">
                销售联盟
            </a>
            |
            <a href="">
                蛇皮社区
            </a>
            |
            <a href="">
                蛇皮公益
            </a>
            |
            <a href="">English Site</a>
            <div class="copyright">
                Copyright&nbsp;©&nbsp;2004-2021&nbsp;&nbsp;蛇皮SP.com&nbsp;版权所有
            </div>
        </div>

    </div>

    <el-dialog :title="title" width="30%" :visible.sync="dialogAddgsVisible">
        <el-input placeholder="输入好友名称" v-model="addfriendInput" clearable style="width:100%"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogAddgsVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendApply">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog :title="applysListTitle" width="75%" :visible.sync="applysListVisible">
        <div class="app_div1_div1">
            <div class="app_div1_div1_div2" v-for="item in applyList">
                <div class="app_div1_div1_div2_people">
                    <div class="app_div1_div1_div2_people_div1" style="float:left;">
                        <el-avatar :src="item.headImg" style="width: 8vh; height: 8vh"></el-avatar>
                    </div>
                    <div class="app_div1_div1_div2_people_div2">
                        {{item.username}}
                    </div>
                    <div class="app_div1_div1_div2_people_div3">
                        我不知道我们能不能笑道最后
                    </div>
                    <el-button type="danger" class="el-icon-close" @click="refuseApply(item.id)">拒绝</el-button>
                    <el-button type="primary" class="el-icon-check" @click="agreeApply(item.id)">同意</el-button>
                </div>
            </div>
        </div>

        <div class="block" style="margin-top: 25px; margin-left: 6%;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="applyPageNo"
                           :page-size="applyPageSize"
                           layout="prev, pager, next, jumper"
                           :total="applyPagesTotalCount">
            </el-pagination>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="applysListVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

    <el-dialog :title="messagesListTitle" width="75%" :visible.sync="messagesListVisible">
        <div class="div_body">

            <div class='div_body_div1' v-for="item in messageList" :class="item.from_id == id ? 'floatRight' : '' ">

                    <div class='div_body_div1_div1' >
                        <img :src="item.head_img">
                    </div>
                    <div class='div_body_div1_div2' >
                        <div class='div_body_div1_div2_div1'>
                            <span class='div_body_div1_div2_div1_span1'>{{item.username}}</span>
                            <i class='layui-icon layui-icon-close delete_i'></i>
                            <span class='div_body_div1_div2_div1_span2'>{{item.create_time}}</span>
                        </div>
                        <div class='div_body_div1_div2_div2'>{{item.content}}</div>
                    </div>

            </div>
        </div>

        <div style="width: 85%;margin: auto">
            <el-input v-model="messageInput" placeholder="请输入内容" style="width: 90%"></el-input>
            <el-button type="primary" style="float: right" @click="sendMessage()">发 送</el-button>
        </div>

        <div class="block" style="margin-top: 25px; margin-left: 6%;" v-if="pageShow">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="messagePageNo"
                           :page-size="messagePageSize"
                           layout="prev, pager, next, jumper"
                           :total="messagePagesTotalCount">
            </el-pagination>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="messagesListVisible = false">关 闭</el-button>
        </span>
    </el-dialog>

</div>

</body>

<script>

    layui.use('layer',function(){
        var layer = layui.layer;
    })

    new Vue({
        el:'#app',
        data(){
            return{
                urls:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                //用户信息
                code:1,//登录状态
                name:"",//姓名
                imgSrc:'',//头像
                id:0,//用户id
                friendInput:'',//用户搜索
                //分页参数
                pageNo:1,//当前页码
                pageSize:10,//每页个数
                pageTotal:0,//页码数
                pagesTotalCount:0,//总条数
                //添加好友框是否显示
                dialogAddgsVisible: false,
                //好友列表
                title:"输入你的朋友名称,向他发出好友申请!",
                addfriendInput:"",//添加的好友名称
                friendsList:[],//好友列表
                //申请列表分页参数
                applyPageNo:1,//当前页码
                applyPageSize:10,//每页个数
                applyPageTotal:0,//页码数
                applyPagesTotalCount:0,//总条数
                //好友列表
                applyList:[],
                applysListTitle:'申请列表',
                //申请列表框是否显示
                applysListVisible:false,
                //消息列表
                messagesListTitle:'消息列表',
                messagesListVisible:false,//消息列表框是否显示
                //消息列表分页参数
                messagePageNo:1,//当前页码
                messagePageSize:10,//每页个数
                messagePageTotal:0,//页码数
                messagePagesTotalCount:0,//总条数
                //消息发送
                messageInput:'',
                toId:null,
                messageList:[],
                messagePageNo:1,//当前页码
                messagePageSize:10,//每页个数
                messagePageTotal:0,//页码数
                messagePagesTotalCount:0,//总条数
                pageShow:false,
            };
        },
        mounted:function(){
            this.login();
        },
        methods:{
            login:function(){//获取登录token信息
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.imgSrc = res.data.headImg;
                            that.id = res.data.id;
                            that.friendList();
                            that.applysList();
                        }
                        if(res.code == 401){
                            location.href="../../../../fronts/login.html";
                        }
                        that.ws_connect();
                    }
                })
            },
            loginOut:function(){//退出
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        location.href="../../../../fronts/login.html";
                    }
                })
            },
            sendApply:function(){//向好友发送申请
                var that = this;
                if(this.addfriendInput == null || this.addfriendInput == ""){
                    alert("好友名称不能为空!");
                    return false;
                }else {
                    $.ajax({
                        url:"/videoWeb/friend/addFriends",
                        headers:{
                            Authorization:localStorage.Authorization,
                        },
                        type:"post",
                        data:{
                            friendName:this.addfriendInput,
                            userId:this.id,
                        },
                        success:function(res){
                            layer.msg(res.msg,{icon:7});
                            if(res.yn == 'yes'){
                                that.dialogAddgsVisible = false;
                            }
                        }
                    })
                }
            },
            friendList:function(){//好友列表
                var that = this;
                $.ajax({
                    url:"/videoWeb/friend/friendsList",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        pageNo:this.pageNo,
                        pageSize:this.pageSize,
                        userId:this.id,
                        friendName:this.friendInput,
                    },
                    success:function(res){
                        that.friendsList = res.data;
                        that.pagesTotalCount = res.pagesTotalCount;
                    }
                })
            },
            applysList:function(){//申请列表
                var that = this;
                $.ajax({
                    url:"/videoWeb/friend/applysList",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        pageNo:this.applyPageNo,
                        pageSize:this.applyPageSize,
                        userId:this.id,
                    },
                    success:function(res){
                        that.applyList = res.data;
                        that.applyPagesTotalCount = res.pagesTotalCount;
                    }
                })
            },
            agreeApply:function (friendId){
                var that = this;
                $.ajax({
                    url:"/videoWeb/friend/agreeApply",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        userId:this.id,
                        friendId:friendId,
                    },
                    success:function(res){
                        that.friendList();
                        that.applysList();
                    }
                })
            },
            refuseApply:function (friendId){
                var that = this;
                $.ajax({
                    url:"/videoWeb/friend/refuseApply",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        userId:this.id,
                        friendId:friendId,
                    },
                    success:function(res){
                        that.friendList();
                        that.applysList();
                    }
                })
            },
            sendMessage:function (){
                var that = this;
                this.ws_sendMsg();
                $.ajax({
                    url:"/videoWeb/message/sendMessage",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        fromId:this.id,
                        toId:this.toId,
                        content:this.messageInput,
                    },
                    success:function(res){
                        layer.msg(res.msg,{icon:1});
                        that.findMessageList();
                        that.pageShow = false;
                    }
                })
            },
            findMessageList:function (){
                var that = this;
                $.ajax({
                    url:"/videoWeb/message/messagePageTotal",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        pageSize:this.messagePageSize,
                        fromId:this.id,
                        toId:this.toId,
                    },
                    success:function(res){
                        console.log("总页码为:"+res.pageTotal);
                        that.messagePageNo = res.pageTotal;
                        that.handleCurrentChange();
                        that.pageShow = true;
                    }
                })
            },
            handleCurrentChange:function (){
                var that = this;
                $.ajax({
                    url:"/videoWeb/message/findMessageListByUser",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    type:"get",
                    data:{
                        pageNo:this.messagePageNo,
                        pageSize:this.messagePageSize,
                        fromId:this.id,
                        toId:this.toId,
                    },
                    success:function(res){
                        that.messageList = res.data;
                        that.messagePagesTotalCount = res.total;
                    }
                })
            },
            // <!-- webSocket -->
            ws_connect:function () {
                // var ws_url = "ws://2l67926i26.wicp.vip/videoWeb/ws/"+this.id;
                // var ws_url = "ws://192.168.18.133:8080//videoWeb/ws/"+this.id;
                var ws_url = "ws://120.25.3.238:8080//videoWeb/ws/"+this.id;
                var that = this;
                if ('WebSocket' in window) {
                    ws = new WebSocket(ws_url);
                } else if ('MozWebSocket' in window) {
                    ws = new MozWebSocket(ws_url);
                } else {
                    console.log('Error: 此浏览器不支持WebSocket!');
                    return;
                }
                ws.onopen = function () {//webSocket建立连接
                    console.log('WebSocket已经建立连接!');
                };
                ws.onclose = function () {//webSocket关闭
                    console.log('WebSocket已经关闭!');
                };
                ws.onmessage = function (message) {//webSocket返回消息
                    console.log("返回的消息为:"+message.data);
                    that.findMessageList();
                };
            },
            ws_sendMsg:function() {//webSocket发送消息
                var sendMassage = "toId="+this.toId+"&msg="+this.messageInput;
                ws.send(sendMassage);
            },
            ws_sendImg:function() {//webSocket发送图片

            },
            <!-- webSocket结束 -->
        },
    })

</script>

</html>
